<template>
    <div>
        <el-row class="program-box setting-box" @click.stop="checkDetails(item)" v-for="(item,index) in tabData">
            <el-col :span="2">
                <div class="program-icon-box">
                    <span class="program-icon">
                        <component :is="item.icon"></component>
                    </span>
                </div>
            </el-col>
            <el-col :span="16">
                <p class="title">{{ item.label }}</p>
                <span class="tip">{{ item.tip }}</span>
            </el-col>
        </el-row>
        <el-dialog v-model="dialogVisible" :title="clickData.label" width="900" :center="true" :close-on-click-modal="false">
            <component :is="clickData.content"></component>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">关闭</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, nextTick, markRaw } from 'vue'
import { useTreeStore } from '~/utils/pinia/tree.js'
import { ElMessage } from 'element-plus'
import ApplicationWhitelist from './components/ApplicationWhitelist.vue'
import ManufacturerSoftware from './components/ManufacturerSoftware.vue'
import OperatingSystemWhitelist from './components/OperatingSystemWhitelist.vue'
import TrustProcessWhitelist from './components/TrustProcessWhitelist.vue'
import { Collection, Monitor, Postcard, DocumentChecked } from '@element-plus/icons-vue'
const tabPosition = ref('left')
let treeStore = useTreeStore()
treeStore.openTree();
let activeName = ref('programWhitelist')
let clickData = reactive({
    label:'',
    content: ''
})
const dialogVisible = ref(false)
const tabData = [
    {label:'应用程序白名单',icon: markRaw(Collection), tip: ' 添加后对所有的白名单策略生效',name:'applicationWhitelist',content:markRaw(ApplicationWhitelist)},
    {label:'厂商软件',icon: markRaw(Monitor),tip: '  添加后自动追踪软件',name:'manufacturerSoftware',content:markRaw(ManufacturerSoftware)},
    {label:'操作系统白名单',icon: markRaw(Postcard),tip: '  添加后带有该签名的程序在保护模式下会放行',name:'operatingSystemWhitelist',content:markRaw(OperatingSystemWhitelist)},
    {label:'信任进程白名单',icon: markRaw(DocumentChecked),tip: '  添加后会追踪信任进程的子进程',name:'trustProcessWhitelist',content:markRaw(TrustProcessWhitelist)},
]

const checkDetails = (data) => {
    if(!treeStore.treeDeviceId){
        ElMessage.error('还未选择设备，请选择左侧分组中的设备后再尝试')
        return
    }
    clickData.label = data.label;
    clickData.content = data.content;
    dialogVisible.value = true;
}
</script>

<style lang="scss" scoped>
.program-box{
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    margin-bottom: 10px;
    padding:10px 10px 10px 40px;
    cursor: pointer;
}
.program-box:hover{
    border: 1px solid $base-color;
}
.program-icon{
    display: inline-block;
    width:30px;
    height:30px;
    color:$base-color;
}
.program-icon-box{
    display:flex;
    width:60px;
    height:60px;
    background: #f5f4f4;
    border-radius: 30px;
    justify-content: center;
    align-items: center;
}
.tip{
    font-size: 14px;
    color:#999;
}
</style>